<template>
  <section class="component product-list">
    <data-box :data="dataList" :selectionRow.sync="selectionRow">
      <template slot="columns">
        <el-table-column prop="productName" label="产品名称" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="productContent" label="产品内容" :min-width="$helper.getColumnWidth(16)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="productPrice" label="产品价格" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="remark" label="备注" :min-width="$helper.getColumnWidth(16)" show-overflow-tooltip>
        </el-table-column>
      </template>
    </data-box>

     <el-row type="flex" justify="center">
          <el-button @click="close()">取消</el-button>
          <el-button @click="confirm()">确定</el-button>
        </el-row>
  </section>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Dependencies } from '~/core/decorator'
import { Prop, Emit } from 'vue-property-decorator'
import DataBox from "~/components/common/data-box.vue";
import { ProductService } from "~/service/service-product/product.service";

@Component({
  components: {
    DataBox
  }
})
export default class ProductList extends Vue {
  @Dependencies(ProductService)
  private productService: ProductService

  private dataList: any[] = []
  private selectionList: any = []
  private selectionRow: any = null

  @Emit('close')
  public close() {}
  @Emit('selectionRowChange')
  public selectionRowChange(val) {}

  public refresh() {
    this.productService.findAllPublicProductList().subscribe(
      data => this.dataList = data,
      error => this.$message.error(error.msg)
    )
  }

  private confirm() {
    if(!this.selectionRow) {
      this.$message.success('请选择产品')
      return 
    }
    this.selectionRowChange(this.selectionRow)
    this.close()
  } 

}
</script>

